/**
 * 市场数据仪表盘页面
 * 纯市场数据展示，与用户状态完全解耦
 */

import React, { useState, useEffect } from 'react';
import IndexCardList from '../components/IndexCardList';
import IndexChart from '../components/IndexChart';
import IndexSelector from '../components/IndexSelector';
import GlobalIndexList from '../components/GlobalIndexList';
import StockRanking from '../components/StockRanking';
import { getChinaMarketStatus, formatMarketStatus } from '@shared/utils/marketStatus';

const MarketDashboard: React.FC = () => {
  const [selectedIndex, setSelectedIndex] = useState('000001.SH'); // 默认选择上证指数
  const [selectedPeriod, setSelectedPeriod] = useState('5m'); // 默认5分钟
  const [marketStatus, setMarketStatus] = useState(getChinaMarketStatus());

  // 定期更新市场状态
  useEffect(() => {
    const interval = setInterval(() => {
      setMarketStatus(getChinaMarketStatus());
    }, 60000); // 每分钟更新一次市场状态

    return () => clearInterval(interval);
  }, []);

  // 错开各区域数据加载时间，避免并发请求
  useEffect(() => {
    // 国内指数：立即加载（已通过组件自动加载）
    // 全球指数：延迟200ms加载
    // 排行榜：延迟400ms加载
    // 这些延迟已在各组件的useQuery中通过staleTime等参数优化
  }, []);

  return (
    <div style={{ padding: '0' }}>
      {/* Header */}
      <div
        style={{
          backgroundColor: 'white',
          padding: '20px 24px',
          borderRadius: '8px',
          marginBottom: '24px',
          boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}
      >
        <div>
          <h1 style={{ margin: '0 0 8px 0', fontSize: '24px', color: '#333', fontWeight: '600' }}>
            📊 市场看板
          </h1>
          <p style={{ margin: 0, color: '#666', fontSize: '14px' }}>
            {new Date().toLocaleDateString('zh-CN', {
              year: 'numeric',
              month: 'long',
              day: 'numeric',
              weekday: 'long',
            })}
          </p>
        </div>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '12px',
          }}
        >
          <div
            style={{
              padding: '8px 16px',
              borderRadius: '20px',
              backgroundColor:
                marketStatus === 'trading'
                  ? '#f6ffed'
                  : marketStatus === 'pre_market'
                  ? '#fffbe6'
                  : '#fafafa',
              border: `1px solid ${
                marketStatus === 'trading'
                  ? '#b7eb8f'
                  : marketStatus === 'pre_market'
                  ? '#ffe58f'
                  : '#d9d9d9'
              }`,
              color:
                marketStatus === 'trading'
                  ? '#52c41a'
                  : marketStatus === 'pre_market'
                  ? '#faad14'
                  : '#999',
              fontSize: '14px',
              fontWeight: '500',
            }}
          >
            {marketStatus === 'trading' ? '🟢' : marketStatus === 'pre_market' ? '🟡' : '⚫'}{' '}
            {formatMarketStatus(marketStatus)}
          </div>
        </div>
      </div>

      {/* [1] 顶部：国内主要指数卡片 */}
      <div style={{ marginBottom: '24px' }}>
        <IndexCardList
          codes={['000001.SH', '399001.SZ', '399006.SZ', 'HSI']}
          onIndexClick={(code) => setSelectedIndex(code)}
        />
      </div>

      {/* [2] 主要指数走势图 */}
      <div style={{ marginBottom: '24px' }}>
        <div
          style={{
            padding: '16px',
            backgroundColor: 'white',
            borderRadius: '8px',
            boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
            marginBottom: '16px',
          }}
        >
          <IndexSelector
            selectedIndex={selectedIndex}
            selectedPeriod={selectedPeriod}
            onIndexChange={setSelectedIndex}
            onPeriodChange={setSelectedPeriod}
          />
        </div>
        <IndexChart code={selectedIndex} period={selectedPeriod} height={400} />
      </div>

      {/* [3] 全球主要指数 + [4] 个股涨跌幅排行 - 左右分栏布局 */}
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: '1fr 2fr',
          gap: '24px',
          marginBottom: '24px',
        }}
      >
        {/* 左侧：全球主要指数 (1/3宽度) */}
        <div>
          <GlobalIndexList />
        </div>

        {/* 右侧：个股涨跌幅排行 (2/3宽度) */}
        <div>
          <StockRanking />
        </div>
      </div>

      {/* 页脚说明 */}
      <div
        style={{
          marginTop: '24px',
          padding: '16px',
          backgroundColor: '#fafafa',
          borderRadius: '8px',
          fontSize: '13px',
          color: '#999',
          textAlign: 'center',
        }}
      >
        <div>💡 数据仅供参考，不构成投资建议</div>
        <div style={{ marginTop: '4px' }}>
          数据来源：公开市场数据 | 更新频率：{marketStatus === 'trading' ? '30秒' : '实时'}
        </div>
      </div>
    </div>
  );
};

export default MarketDashboard;

